<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%@ include file="../header.jsp"%>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>购物车</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="${path}/resources-front/css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="${path}/resources-front/css/common.css" rel="stylesheet"/>
    <link href="${path}/resources-front/css/cart.css" rel="stylesheet"/>
</head>
<body class="graybg-theme">
    <!--头部-->
        <div class="topper">
            <div class="wrapper">
                <div class="left-bar">
                    <div class="back-home divider">
                        <em></em><a href="index.html">商城首页</a>
                    </div>
                    <div class="item"><a href="">商家中心</a></div>
                </div>
                <div class="right-bar">
                    <div class="login-user sub-menu">
                        <a class="menu-hd" href="">txtangxia<em></em></a>
                        <div class="down">
                            <a href="">内容</a>
                            <a href="">内容</a>
                            <a href="">内容</a>
                        </div>
                    </div>
                    <div class="item"><a href="">消息（<span class="txt-theme">0</span>）</a></div>
                    <div class="logout divider"><a href="">退出</a></div>
                    <span class=""></span>
                    <div class="cart"><em></em><a href="">购物车<span class="txt-theme">2</span>件</a></div>
                    <div class="order"><em></em><a href="">我的订单</a></div>
                    <div class="fav"><em></em><a href="">我的收藏</a></div>
                    <div class="help"><em></em><a href="">帮助中心</a></div>
                </div>
            </div>
        </div>
        <div class="cart-header wrapper">
            <div class="logo">
                <a href="index.html"><img src="${path}/resources-front/img/logo.png" alt="logo" /></a>
            </div>
            <div class="step-box">
                <div class="row">
                    <div class="step first active col-3">
                        <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
                    </div>
                    <div class="step col-3">
                        <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
                    </div>
                    <div class="step col-3">
                        <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
                    </div>
                    <div class="step last col-3">
                        <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
                    </div>
                </div>
            </div>
        </div>

    <!--头部-->

    <div class="wrapper">
        <table class="cart-table">
            <thead>
                <tr class="hd">
                    <th width="30px" class="first"><label class="check"><input class="sty1-checkbox" id="checkall" onclick="checkall()" type="checkbox" name="all" /><span>全选</span></label></th>
                    <th width="430px">商品名称</th>
                    <th width="180px">单价</th>
                    <th width="190px">数量</th>
                    <th width="180px">小计</th>
                    <th width="190px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="blank">
                    <td colspan="6"></td>
                </tr>
            </tbody>
            <tbody>
                <c:forEach items="${list}" var="list">
	                <tr id="cartItem${list.cartId}" class="goods">
	                    <c:if test="${list.checked == 1}">
		                    <td class="first"><div class="check"><input type="checkbox" class="sty1-checkbox" name="selectCheckbox" id="${list.cartId}" onclick="statusCheckbox(${list.cartId})" checked/></div></td>
	                    </c:if>
	                    <c:if test="${list.checked != 1}">
		                    <td class="first"><div class="check"><input type="checkbox" class="sty1-checkbox" name="selectCheckbox" id="${list.cartId}" onclick="statusCheckbox(${list.cartId})"/></div></td>
	                    </c:if>
	                    <td>
	                        <div class="info-box">
	                            <img src="http://qht8fjumq.hb-bkt.clouddn.com/${list.productImage}" alt="">
	                            <div class="info">
	                                <div class="name">${list.productName}</div>
	                            </div>
	                        </div>
	                    </td>
	                    <td>￥<span class="unitprice">${list.productPrice}</span></td>
	                    <td>
	                        <div class="mod-numbox cart-numbox" data-max="30">
	                            <span class="count-minus" onclick="updateQuantity(${list.productId},${list.cartId},-1,${list.productPrice})"></span>
	                            <input id="quantityId${list.cartId}" class="count-input" value="${list.quantity}"  type="text" name="num" />
	                            <span class="count-plus" onclick="updateQuantity(${list.productId},${list.cartId},+1,${list.productPrice})"></span>
	                        </div>
	                    </td>
	                    <td class="txt-error">￥<span id="cartPrice${list.cartId}" class="price">${list.productPrice*list.quantity}</span></td>
	                    <td><a href="javascript:deleteById(${list.cartId})" class="del iconfont icon-shanchu"></a></td>
	                </tr>
                </c:forEach>
            </tbody>
            
        </table>
        <div class="cart-total-box">
            <div class="cart-total">
                <div class="fl">
                    <div class="back"><a href="">继续购物</a></div><div class="count">共 <span class="num" id="totalNum"></span> 件商品， 已选择 <span class="num" id="selectedNum"></span> 件</div>
                </div>
                <div class="fr">
                    <div class="price">
                        合计（不含运费）：<span id="totalMoney"></span>元
                    </div>
                    <a class="go-account ui-btn-theme" href="${path}/order/getOrder.shtml">去结算</a>
                </div>
            </div>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
</body>
<script src="${path}/resources-front/js/jquery.js"></script>
<link rel="stylesheet" href="${path}/resources-front/js/icheck/style.css"/>
<script src="${path}/resources-front/js/icheck/icheck.min.js"></script>
<script src="${path}/resources-front/js/global.js"></script>
<script type="text/javascript">
	$(function(){
		updateTotalMoney();
	});
	function updateTotalMoney() {
		var checkBoxTotal = $('input[name=selectCheckbox]');
		var checkBox = $('input[name=selectCheckbox]:checked');
		$('#totalNum').text(checkBoxTotal.length);
		$('#selectedNum').text(checkBox.length);
		var totalMoney = 0;
		$(checkBox).each(function() {
			var checkBoxId = this.id;// 获得当前遍历的购物车Id
			var cartPriceThis = $('#cartPrice' + checkBoxId).text();// 当前小计
			totalMoney += parseFloat(cartPriceThis);
		});
		$('#totalMoney').text(totalMoney);
	}
	function updateQuantity(productId,cartId,quantity,productPrice) {
		$.post(
			'${path}/cart/updateQuantity.shtml',
			{'productId':productId,'quantity':quantity},
			function(jsonResult) {
				var newQuantity = parseInt($('#quantityId' + cartId).val()) + quantity;
				$('#quantityId' + cartId).val(newQuantity);
				$('#cartPrice' + cartId).text(parseFloat(newQuantity * productPrice));
				updateTotalMoney();
			},
			'json'
		);
	}
	
	/* 删除事件 */
	function deleteById(cartId) {
		layer.confirm('您确定要删除么？', function() {
			$.post(
				'${path}/cart/deleteById.shtml',
				{'cartId':cartId},
				function(jsonResult) {
					if(jsonResult.code == 0) {
						mylayer.successMsg(jsonResult.msg);
						$('#cartItem'+cartId).remove();
					} else {
						mylayer.errorMsg(jsonResult.msg);
					}
				},
				'json'
			);
		});
	}
	
	function statusCheckbox(cartId) {
        var checked = $('#'+cartId).prop('checked'); // prop('checked')
        if(checked) {
            checked = 1;
        } else {
            checked = 0;
        }
        $.post(
            '${path}/cart/updateStatus.shtml',
            {'cartId' : cartId, 'checked' : checked},
            function (jsonObj) {
                if (jsonObj.code == 0) {
                    updateTotalMoney();
                }
            },
            'json'
        );
	}
    function checkall() {
        var  checkedall = $('#checkall').prop('checked');
        if (checkedall) {
            checkedall = 1;
            var otherChecked = $('input[name=selectCheckbox]').prop('checked', true);
        } else {
            checkedall = 0;
            var otherChecked = $('input[name=selectCheckbox]').prop('checked', false );
        }
        console.log(checkedall);
        $.post(
            '${path}/cart/updateStatusAll.shtml',
            {'checkedall' : checkedall},
            function (jsonObj) {
                if (jsonObj.code == 0) {
                    updateTotalMoney();
                }
            },
            'json'
        );
    }
</script>
<script >
    $(function () {

        //结算固定显示
        $(window).on('load resize scroll',function () {
            var bar=$('.cart-total'),
            barH=bar.outerHeight(),
            barWrap=bar.parent(),
            otop=barWrap.offset().top,
            oleft=barWrap.offset().left,
            sTop=$(this).scrollTop(),
            wh=$(this).height();
            if (sTop+wh-barH<otop) {
                bar.addClass('fixed');
                var left2=oleft-$(this).scrollLeft()
                bar.css('left',left2);
            }
            else {
                bar.removeClass('fixed');
            }
        });
    });
</script>
</html>